/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiCollapsibleNavGroup {
  background-color: $ouiCollapsibleNavGroupNoneBackgroundColor;

  &:not(:first-child) {
    border-top: $ouiBorderThin;
  }

  // This class does not accept a custom classname
  .ouiAccordion__triggerWrapper {
    // Add padding to the trigger wrapper in case an `extraAction` is passed
    // that doesn't get wrapped in the `__heading`
    padding: $ouiSize;
  }
}

.ouiCollapsibleNavGroup--light {
  background-color: $ouiCollapsibleNavGroupLightBackgroundColor;
}

.ouiCollapsibleNavGroup--dark {
  background-color: $ouiCollapsibleNavGroupDarkBackgroundColor;
  color: $ouiColorGhost;

  // Forcing better contrast of focus state on OuiAccordion toggle icon
  .ouiCollapsibleNavGroup__heading:focus .ouiAccordion__iconWrapper {
    color: $ouiCollapsibleNavGroupDarkHighContrastColor;
    animation-name: ouiCollapsibleNavGroupDarkFocusRingAnimate !important; // sass-lint:disable-line no-important
  }

  .ouiCollapsibleNavGroup__title {
    color: inherit;
    line-height: inherit;
  }
}

.ouiCollapsibleNavGroup__heading {
  font-weight: $ouiFontWeightSemiBold;

  // If the heading is not in an accordion, it needs the padding
  &:not(.ouiAccordion__button) {
    padding: $ouiSize;
  }
}

.ouiCollapsibleNavGroup__children {
  padding: $ouiSizeS;
}

.ouiCollapsibleNavGroup--withHeading .ouiCollapsibleNavGroup__children {
  padding-top: 0;
}

@keyframes ouiCollapsibleNavGroupDarkFocusRingAnimate {
  0% {
    box-shadow: 0 0 0 $ouiFocusRingAnimStartSize $ouiFocusRingAnimStartColor;
  }

  100% {
    box-shadow: 0 0 0 $ouiFocusRingSize $ouiCollapsibleNavGroupDarkHighContrastColor;
  }
}
